<template>
    <BoxBorder13
        :colors="['#6586ec' ,'#2cf7fe']"
        class="bigDataCard"
    >
        <div class="header">
            <div class="title">各警务区使用趋势</div>
            <DeptList v-model="deptId" @change="changeDeptHandle"/>
        </div>
        <div class="body" ref="bodyRef">
            <VChart ref="chartRef" :option="mapOptions" :style="{ height: height }"/>
        </div>
    </BoxBorder13>
</template>

<script setup>
import {BoxBorder13} from "guodu-data-panel";
import VChart from "vue-echarts";
import {use} from 'echarts';
import {GridComponent} from "echarts/components";
import {LineChart} from "echarts/charts";
import {CanvasRenderer} from "echarts/renderers";
import {UniversalTransition} from "echarts/features";
import {useTemplateRef} from "vue";
import DeptList from "@/views/CenterController/components/DepList.vue";
import {getSendPoliceTrendOfJwApply} from "@/api/StatisticAnalysis/UseChart.js";
import dayjs from "dayjs";

const deptId = ref(0);


const bodyRef = useTemplateRef('bodyRef')
const height = ref('')
use([GridComponent, LineChart, CanvasRenderer, UniversalTransition]);


const mapOptions = ref({})

const entries = Array.from({length: 12}, (_, i) => [i + 1, 0]);
const total = ref(entries.reduce((acc, [key, value]) => ({...acc, [key]: value}), {}));
const questionable = ref({...total.value});

let intervalId;
onMounted(() => {
    nextTick(() => {
        height.value = bodyRef.value.clientHeight
    });

    // 设置定时器，每10秒获取一次数据
    intervalId = setInterval(getData, 2 * 60 * 1000);

})

onUnmounted(() => {
    if (intervalId) {
        clearInterval(intervalId);
    }
})

const changeDeptHandle = (id) => {
    getData()
}

const getData = async () => {
    const res = await getSendPoliceTrendOfJwApply({
        unitId: deptId.value,
        endYear: dayjs().format('YYYY-MM-DD'),
        isUnit: true
    });
    if (res.data.length) {
        res.data.forEach(item => {
            if (questionable.value.hasOwnProperty(item.months)) questionable.value[item.months] = item.counts;
        });
    } else {
        questionable.value = Array.from({length: 12}, (_, i) => 0)
    }
    setChartOptions(Object.values(questionable.value))
}

const setChartOptions = (series) => {
    mapOptions.value = {
        grid: {
            left: 0,
            right: 10,
            top: 10,
            bottom: 0,
            containLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            axisLine: {
                show: false
            },
            axisLabel: {
                color: '#2cf7fe'
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLabel: {
                color: '#2cf7fe'
            }
        },
        series: [
            {
                name: '警务区使用趋势',
                type: 'line',
                stack: 'Total',
                smooth: true,
                data: series,
                lineStyle: {
                    color: '#73DDFF'
                },
                itemStyle: {
                    color: '#fff',
                    borderColor: '#fff',
                    borderWidth: 2
                },
                symbol: 'circle',
                symbolSize: 2
            },
            // {
            //     name: 'Union Ads',
            //     type: 'line',
            //     stack: 'Total',
            //     smooth: true,
            //     data: [220, 182, 974, 697, 262, 816, 891, 358, 586, 558, 998, 911],
            //     lineStyle: {
            //         color: '#ef6666'
            //     },
            //     itemStyle: {
            //         color: '#fff',
            //         borderColor: '#fff',
            //         borderWidth: 2
            //     },
            //     symbol: 'circle',
            //     symbolSize: 2
            // }
        ]

    }
}
</script>

<style scoped lang="scss">

</style>